<template>
    <div class="outDiv">
        <div class="head">
            <div class="top">
                <h1>大学生志愿者活动</h1>
                <div class="user" @click="toPerson()">
                    <div class="userIcon">
                        <span><img src="../imgs/myicon.png" alt=""></span>
                        <span>{{ who }}</span>
                    </div>
                    <div>
                        <span style="margin-right: 8px;">></span>
                    </div>
                </div>
            </div>
            <div class="down">
                <div class="navigation">
                    <div class="activities" @click="btnAct">
                        <span><img src="../imgs/认领活动.png" alt=""></span>
                        <span>认领活动</span>
                    </div>
                    <div class="activities" @click="btnList">
                        <span><img src="../imgs/爱心报表.png" alt=""></span>
                        <span>爱心报表</span>
                    </div>
                    <div class="activities" @click="btnService">
                        <span><img src="../imgs/服务纪实.png" alt=""></span>
                        <span>服务纪实</span>
                    </div>
                    <div class="activities" @click="btnMyServer">
                        <span><img src="../imgs/我的服务.png" alt=""></span>
                        <span>我的服务</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <div class="footTop">
                <span style="margin-left: 10px;">志愿活动</span>
                <span style="margin-right: 15px;" @click="btnAct">查看更多 ></span>
            </div>
            <div class="footContent">
                <div v-for="item in items" :key="item.id" style="display: flex;margin-bottom: 10px;"
                    @click="btnJion(item.id)">
                    <div class="footContentLeft">
                        <span>{{ item.vstatus }}</span>
                    </div>
                    <div class="footContentRight">
                        <span>{{ item.title }}</span>
                        <span style="font-size: 14px;">{{ item.vtime }}</span>
                        <span class="site">{{ item.place }}</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup>
// == 导入相关依赖-开始 ==
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { url } from '@/router'
// == 导入相关依赖-开始 ==
// == 定义相关实例-开始 ==
let items = ref([])
let router = useRouter()
let who = ref('')
// == 定义相关实例-结束 ==

// == 相关动作函数-开始 ==
onMounted(() => {

    fetch(`${url}/admin/${localStorage.getItem('userName')}`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        data.forEach(item => {
            who.value = item.uname;
        })
    })
    fetch(`${url}/volunteers`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        data.forEach(item => {
            if (item.place === '操场') {
                item.place = '本人所在学校活动'
            } else {
                item.place = item.place
            }
        })
        items.value = data
    })
})
// 跳转至个人信息页面
function toPerson() {
    router.push(`/person/${who.value}`)
}
// 跳转至积分排名页面
function btnList() {
    router.push('/points')
}
// 跳转至认领活动页面
function btnAct() {
    router.push('/activity')
}
// 跳至服务记录上传页面
function btnService() {
    router.push('/server')
}
// 跳转服务记录列表页面
function btnMyServer() {
    router.push('/myserver')
}
// 跳转志愿活动详情页面
function btnJion(id) {
    let aId = parseInt(id)
    router.push(`/detail/${aId}`)
}
// == 相关动作函数-开始 ==

</script>
<style scoped>
.footContent {
    display: flex;
    height: calc(100% - 4%);
    width: 100%;
    /* background-color: #a9a9a945; */
    background-color: #5f9ea063;
    flex-direction: column;
    overflow: auto;
}

.footContentLeft {
    width: 150px;
    height: 100px;
    background-image: url('../imgs/volunteer.png');
    background-repeat: no-repeat;
    background-size: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.footContentLeft span {
    width: 40%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #17e3d7;
    /* background-color: #c9c5c5; */
}

.footContentRight {
    flex: 1;
    font-family: cursive;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100px;

}

.footContentRight .site {
    display: flex;
    justify-content: center;
    background-color: #d1e5e5;
    width: 50%;
    align-items: center;
    height: 15%;
    font-size: 12px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 10px;
}

.footTop {
    background-color: #5f9ea0db;
    font-family: cursive;
    width: 100%;
    display: flex;
    height: 4%;
    justify-content: space-between;
    align-items: center;
}

.user {
    align-items: center;
    justify-content: space-between;
    display: flex;
    border-radius: 8px;
    margin-top: 3%;
    width: 95%;
    height: 40%;
    background-color: #fff;
    font-family: cursive;
}


.activities {
    width: 20%;
    height: 90%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.activities span {
    height: 80%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.navigation {
    width: 95%;
    display: flex;
    height: 75%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    justify-content: space-around;
    align-items: center;
}

.head {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.foot {
    width: 100%;
    height: calc(100% - 20%);
    background-color: #fff;
    z-index: 9999;
}

.outDiv {
    width: 100%;
    height: 100vh;
}

.top {
    width: 100%;
    height: 60%;
    background-color: cadetblue;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;
}

.down {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    background-color: cadetblue;
}

h1 {
    margin-top: 2%;
    color: #fff;
    font-family: cursive;
    letter-spacing: 2px;
    height: 10px;
}

.userIcon {
    height: 100%;
    width: 30%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.userIcon span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.userIcon img {
    width: 100%;
    height: 100%;
}

input {
    width: 110px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    text-align: center;
    outline: none;
}
</style>